import React from 'react'
import './GiftPopupTab.css'
const GiftPopupTab = props => {
    const {
        tabs,
        onTabSelected,
    } = props

    const tabsTemplate = (
        <div className='flex flex-center' style={{zIndex: '999',}}>
            {
                tabs.map(tab => (
                    <div
                        className='text-align-center'
                        style={{width: '20%',}}
                        key={tab.title}
                        onClick={() => onTabSelected(tab)}
                    >
                        <div style={{
                            fontSize: tab.active ? '16px' : '14px',
                            color: '#333',
                            opacity: tab.active ? '1' : '0.5',
                        }}>{tab.title}</div>
                        {tab.active ? <div className='gift-popup-tabs-tab-active'/> : null}
                    </div>
                ))
            }
        </div>
    )

    return tabsTemplate
}

export default GiftPopupTab
